{% extends 'textbased.html' %}

{% block title %}The Archive of Comics{% endblock %}

{% block headstuff %}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#main .box .nav").wrap('<p class="toggler">');
    $(".toggler").prepend("<span>Show/hide the list of comics in this storyline...</span>");
    $("#main .box .nav").toggle();
    $(".toggler").css("cursor","pointer");
    
    $("#main .box .toggler").each(function(i){
        $(this).click(function(){
            $(this).children("ul").slideToggle("slow");
        });
    });
});
</script>
<style type="text/css">
.toggler{background-color:#ccc;text-align:right;padding:0 0 0 0;}
.toggler span{padding:0 1.5em 0 1.5em;}
.toggler:hover{background-color:#aaa;}
#main p{margin-bottom:0;}
#main p.toggler{margin-bottom:1.5em;}
#main ul{margin:0 1.5em 0 1.5em;padding-bottom:1.5em;text-align:left;}
</style>
{% endblock %}

{% block pageinfo %}
    <h2>Comic Archive</h2>
    <p>This is the archive of comics. Examine a storyline and dive right in!</p>
{% endblock %}

{% block extracontent %}
{% spaceless %}
{% if comics %}
{% for comic in comics %}
{% if comic.starts_storyline %}
{% if not forloop.first %}
        </ul>
{% endif %}
        <h3>{{ comic.storyline_title }}</h3>
        <p>{{ comic.storyline_description }}
        <ul class="nav">
{% endif %}
<li><a href="{{ comic.get_absolute_url }}"><span>{{ comic.date|date:"j F, Y" }}</span>
{{comic.title}}</a>
</li>
{% endfor %}
        </ul>
{% else %}
        <p>There are no comics.</p>
{% endif %}
{% endspaceless %}
{% endblock %}

{% block localnews %}
<div id="contribution">
<h3>Fun Facts</h3>
<p>There are <b>{{ comics|length }}</b> comics posted so far!<br>
You might like <b>some</b> of them!</p>
</div>
{% endblock %}